<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- 声明文档类型为XHTML 1.0过渡版，确保页面按照兼容模式渲染 -->
<html xmlns="http://www.w3.org/1999/xhtml"> <!-- 声明XML命名空间，使用XHTML标准 -->

<link href="main.css" rel="stylesheet" type="text/css"> <!-- 引入主样式文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- 引入Font Awesome图标库，提供图标支持 -->
<link href="javascripts/theme.default.css" rel="stylesheet"> <!-- 引入主题样式文件 -->

<head> <!-- 页面头部开始 -->

<!-- Global site tag (gtag.js) - Google Analytics --> <!-- 引入Google Analytics的全局标签，用于页面流量统计 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-171270643-1"></script> <!-- 异步加载Google Analytics脚本 -->
<script type="text/javascript" src="javascripts/googleAnalyticsScripts.js"></script> <!-- 引入自定义的Google Analytics脚本 -->

<!-- Twitter Meta Tags --> <!-- 用于优化页面在Twitter上的展示效果 -->
<meta name="twitter:site" content="@Ludii"> <!-- 设置Twitter的站点用户名 -->
<meta name="twitter:title" content="Ludii Portal"> <!-- 设置Twitter分享时显示的页面标题 -->
<meta name="twitter:description" content="Home of the Ludii General Game System."> <!-- 设置Twitter分享时的描述 -->
<meta name="twitter:url" content="https://ludii.games"> <!-- 设置Twitter分享时的链接 -->
<meta name="twitter:image" content="https://ludii.games/images/logo-clover-d.png"> <!-- 设置Twitter分享时的图片 -->
<meta name="twitter:card" content="summary" /> <!-- 设置Twitter卡片类型为摘要 -->

<title>Ludii Portal</title> <!-- 设置网页的标题，显示在浏览器标签栏 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- 设置页面字符编码为UTF-8 -->
<link rel="icon" href="images/logo-clover-c.gif"> <!-- 设置网页的favicon图标 -->

<!-- 引入Cookie同意的样式和脚本 -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" /> <!-- 引入cookie同意提示的样式 -->
<script type="text/javascript" src="javascripts/genericCookies.js"></script> <!-- 引入自定义的cookie同意脚本 -->

</head> <!-- 页面头部结束 -->

<body background="images/bg-1.jpg"> <!-- 设置页面背景图片为bg-1.jpg -->

<div id="container"> <!-- 页面主容器 -->

  <table width="100%" border="0" cellpadding="0" cellspacing="0" margin="0" padding="0" bgcolor="#FFFFFF"> <!-- 创建一个100%宽的表格，背景为白色 -->
    <tbody> <!-- 表格主体开始 -->

    <tr> <!-- 表格行开始 -->
    <td> <!-- 表格单元格开始 -->
      <table border="0" cellpadding="5" cellspacing="0"> <!-- 嵌套表格，设置内边距为5 -->
        <tbody> <!-- 嵌套表格主体开始 -->
          <tr> <!-- 嵌套表格行开始 -->
            <td width="120" align="center" background="images/bg-2.jpg"><img src="images/logo-clover-c-border.gif" width="104" height="86" alt="background"></td> <!-- 显示Logo，背景为bg-2.jpg -->
            <td width="1711" valign="bottom" background="images/bg-2.jpg"><span class="style23 style1"><span class="style1 style49"> <span class="style54">L</span>udii <span class="style54">P</span>ortal</span><br> <!-- 页面标题“Ludii Portal” -->
              <span class="style44">Home of the Ludii General Game System</span></span><br> <!-- 描述“Home of the Ludii General Game System” -->
            <span class="style6">&nbsp;&nbsp;&nbsp;</span><br></td> <!-- 空白间隔 -->
            <td width="1150" align="right" background="images/bg-2.jpg"> <!-- 右对齐的单元格 -->
			
			<!--
              <p><a href="http://ludeme.eu/index.html"><span class="style1 style23">Part of the Digital Ludeme Project <img src="images/DLPlogo2.png" height="20" alt="background"></span></a> &nbsp;&nbsp;&nbsp;</p>
			  -->
			  <p> <!-- 显示“Part of the Digital Ludeme Project”的文本 -->
			  
			  <div align="right"><span class="style1 style23"><a href="http://ludeme.eu/index.html" class="css style22 style25" style="color: white;">Part of the Digital Ludeme Project</a> <img src="images/DLPlogo2.png" height="20" alt="background"></span></span></span>&nbsp;&nbsp;&nbsp;</div></p> <!-- 链接到Digital Ludeme Project -->

                <div id="register"> <!-- 用户注册和登录部分 -->
                    <a href="login.php"> <span class="style1 style23">Sign in / Register</span></a>  &nbsp; <!-- 注册登录链接 -->
                <a href="login.php"><img src="images/account1.png" height="38" alt="background"></a> &nbsp;&nbsp; </div> <!-- 显示账户图标 -->
              </td> <!-- 结束右对齐单元格 -->
          </tr> <!-- 结束嵌套表格行 -->
        </tbody> <!-- 结束嵌套表格主体 -->
      </table></td> <!-- 结束嵌套表格单元格 -->
  </tr> <!-- 结束表格行 -->

  <td bgcolor="#6797C8"> <!-- 设置表格单元格背景色为#6797C8 -->
    <table width="100.05%" cellpadding="0" cellspacing="0" id="top_nav"> <!-- 创建顶部导航表格 -->
      <tbody> <!-- 表格主体开始 -->
        <tr> <!-- 表格行开始 -->
          <td width="110" align="center"><a href="index.php" class="style11" style="color: white;">Home</a></td> <!-- 首页链接 -->
          <td width="100" align="center"><a href="library.php" class="style11" style="color: white;">Games</a></td> <!-- 游戏库链接 -->
          <td width="100" align="center"><a href="forum/" class="style11" style="color: white;">Forum</a></td> <!-- 论坛链接 -->
          <td width="130" align="center"><a href="download.php" class="style11" style="color: white;">Downloads</a></td> <!-- 下载链接 -->
          <td width="130" align="center"><a href="references.php" class="style11" style="color: white;">References</a></td> <!-- 参考链接 -->
          <td width="120" align="center"><a href="searchConcepts.php" class="style11" style="color: white;">Concepts</a></td> <!-- 概念链接 -->
          <td width="130" align="center"><a href="wishlist.php" class="style11" style="color: white;">Contribute</a></td> <!-- 贡献链接 -->
          <td width="120" align="center"><a href="http://ludiitutorials.rtfd.io/" class="style11" style="color: white;">Tutorials</a></td> <!-- 教程链接 -->
          <td width="140" align="center"><a href="browseTournaments.php" class="style11" style="color: white;">Tournaments</a></td> <!-- 锦标赛链接 -->
          <td width="140" align="center"><a href="worldMap.php" class="style11" style="color: white;">World Map</a></td> <!-- 世界地图链接 -->
          <td width="110" align="center"><a href="ludemeTree.php" class="style11" style="color: white;">Ludemes</a></td> <!-- Ludemes链接 -->
          <td width="90" align="center"><a href="contact.php" class="style11" style="color: white;">About</a></td> <!-- 关于链接 -->
          <td valign="bottom"><br><br></td> <!-- 留出底部空白 -->
        </tr> <!-- 结束表格行 -->
      </tbody> <!-- 结束表格主体 -->
    </table> <!-- 结束顶部导航表格 -->
  </td> <!-- 结束表格单元格 -->
</tr> <!-- 结束表格行 -->

<tr>
  <td valign="top" height="820
  <table width="99%" cellspacing="12" margin="0" padding="0"> <!-- 创建一个宽度为99%的表格，行间距为12 -->
    <tbody> <!-- 表格主体开始 -->

<tr>
    <td style="padding-left: 1%; padding-right: 1%;" width="60%" valign="top"> <!-- 主要内容区域，设置左右内边距为1%，宽度为60%，垂直对齐为顶部 -->
        
        <div align="justify" id="info_text"> <!-- 设置文本内容对齐方式为两端对齐 -->
            <span class="style1"> <!-- 使用style1类 -->
            
                <!---
                <p style="color:#FF0000";>Information on the Game AI Applications for Historical Games Research workshop can be viewed <a href="workshop.php" style="color: #0000EE">here</a>.</p>
                --->
            
                <p>Welcome to the Ludii Portal!</p> <!-- 欢迎信息 -->
                <p>Ludii is a general game system designed to play, evaluate and design a wide range of games, including board games, card games, dice games, mathematical games, and so on. Download the Ludii player to explore our ever-growing database of games, test your AI search algorithms, and design your own games.</p> <!-- 介绍Ludii系统的功能 -->
                <p>Games are described as structured sets of ludemes (units of game-related information). This allows the full range of traditional strategy games from around the world to be modelled in a single playable database for the first time. Ludii is being developed as part of the ERC-funded <a href="http://ludeme.eu/index.html" style="color: #0000EE">Digital Ludeme Project</a>.</p> <!-- 解释Ludii的背景和目标 -->
            </span>
            <p align="justify" class="style24">&nbsp;&nbsp;&nbsp;</p> <!-- 添加一些空白 -->
        </div>

        <hr> <!-- 分隔线 -->
        <p align="justify" class="style24">&nbsp;&nbsp;&nbsp;</p> <!-- 添加空白 -->

        <!-- 表格展示信息关于如何使用Ludii系统 -->
        <table width="100%" height="240" border="0" cellpadding="10" cellspacing="0" id="event_text"> <!-- 创建一个宽度100%且高度为240px的表格，内边距为10 -->
            <tbody> <!-- 表格主体开始 -->
                <tr bgcolor="#E3DDDD"> <!-- 设置表格行背景色为#E3DDDD -->
                    
                    <td class="roundedCorners" valign="top" width="50%" bgcolor="#FDDFDF"> <!-- 设置单元格的圆角，并且背景色为#FDDFDF -->
                        <p><strong><span class="style11" style="color:#950909">Playing Games with Ludii</span></strong> </p> <!-- 显示标题“Playing Games with Ludii” -->
                        <span class="style1" style="color:#950909"> <!-- 设置文本颜色为#950909 -->
                            <p>1. Download the Ludii player <a href="download.php" style="color: #0000EE">here</a>.<br> <!-- 下载Ludii播放器的链接 -->
                                2. Access the user guide <a href="downloads/LudiiUserGuide.pdf" style="color: #0000EE">here</a>.<br> <!-- 获取用户指南的链接 -->
                                3. Play games in your web browser or phone <a href="library.php" style="color: #0000EE">here</a>.</p> <!-- 在浏览器或手机中玩游戏的链接 -->
                        </span>
                    </td>
                    
                    <td width="20px" valign="top" bgcolor="#FFFFFF"></td> <!-- 留出20px空白 -->
                    
                    <td class="roundedCorners" valign="top" width="50%" bgcolor="#FCF7DE"> <!-- 设置单元格的圆角，并且背景色为#FCF7DE -->
                        <p><strong><span class="style11" style="color:#806D0B">Writing Games for Ludii</span></strong> </p> <!-- 显示标题“Writing Games for Ludii” -->
                        <span class="style1" style="color:#806D0B"> <!-- 设置文本颜色为#806D0B -->
                            <p>1. Download the Ludii player <a href="download.php" style="color: #0000EE">here</a>.<br> <!-- 下载Ludii播放器的链接 -->
                                2. Access the language reference <a href="downloads/LudiiLanguageReference.pdf" style="color: #0000EE">here</a>.<br> <!-- 获取Ludii语言参考的链接 -->
                                3. Some useful tips and examples can be found on the tutorials page <a href="https://ludiitutorials.readthedocs.io/" style="color: #0000EE">here</a>.</p> <!-- 访问教程页面的链接 -->
                        </span>
                    </td>
                    
                </tr>

                <tr><td></td></tr> <!-- 留出空行 -->

                <tr bgcolor="#E3DDDD"> <!-- 设置表格行背景色为#E3DDDD -->
                    
                    <td class="roundedCorners" valign="top" width="50%" bgcolor="#DEFDE0"> <!-- 设置单元格的圆角，并且背景色为#DEFDE0 -->
                        <p><strong><span class="style11" style="color:#055E0B">Creating a Ludii Agent</span></strong> </p> <!-- 显示标题“Creating a Ludii Agent” -->
                        <span class="style1" style="color:#055E0B"> <!-- 设置文本颜色为#055E0B -->
                            <p>1. Download the Ludii player <a href="download.php" style="color: #0000EE">here</a>.<br> <!-- 下载Ludii播放器的链接 -->
                                2. Download and try an example agent for Ludii <a href="https://github.com/Ludeme/LudiiExampleAI" style="color: #0000EE">here</a>.<br> <!-- 下载并尝试Ludii示例代理的链接 -->
                                3. Additional information about the development API can be found here <a href="https://ludiitutorials.readthedocs.io/en/latest/basic_ai_api.html" style="color: #0000EE">here</a>.</p> <!-- 获取开发API的链接 -->
                        </span>
                    </td>

                    <td width="20px" valign="top" bgcolor="#FFFFFF"></td> <!-- 留出20px空白 -->
                    
                    <td class="roundedCorners" valign="top" width="50%" bgcolor="#F0DEFD"> <!-- 设置单元格的圆角，并且背景色为#F0DEFD -->
                        <p><strong><span class="style11" style="color:#5D099A" >Entering a Ludii Competition</span></strong> </p> <!-- 显示标题“Entering a Ludii Competition” -->
                        <span class="style1" style="color:#5D099A"> <!-- 设置文本颜色为#5D099A -->
                            <p>1. We will be running a GGP competition in 2022 as part of the ICGA Computer Olympiad.<br> <!-- 提到将在2022年举办GGP竞赛 -->
                                2. Additional information about the Ludii AI Competition can be found here <a href="https://github.com/Ludeme/LudiiAICompetition" style="color: #0000EE">here</a>.</p> <!-- 获取Ludii AI竞赛的更多信息的链接 -->
                        </span>
                    </td>
                    
                </tr>
            </tbody>
        </table> <!-- 结束表格 -->

        <p align="justify" class="style24">&nbsp;&nbsp;&nbsp;</p> <!-- 添加空白 -->
        <hr> <!-- 分隔线 -->
        <p align="justify" class="style24">&nbsp;&nbsp;&nbsp;</p> <!-- 添加空白 -->

        <div class="row"> <!-- 创建行容器 -->

            <div class="card"> <!-- 创建卡片组件 -->
                <a href="library.php"> <!-- 创建链接到游戏库页面 -->
                  <img src="images/gameLibrary.jpg" alt="Avatar" style="width:100%;"> <!-- 显示游戏库的图片 -->
                  <div class="container"><br> <!-- 创建容器 -->
                    <span class="style11"><strong>Game Library</strong></span> <!-- 游戏库标题 -->
                    <p><span class="style1">Our game library includes historical information and playable versions of a large number of games. This will eventually include the thousand most important traditional strategy games throughout history.</span></p> <!-- 游戏库介绍 -->
                  </div>
				</a>
            </div>

            &nbsp; <!-- 留出空白 -->
<!-- 主要内容展示卡片组件 -->
<div class="card">
    <a href="http://ludeme.eu/index.html">
        <img src="images/topsy-turvy-2c.jpg" alt="Avatar" style="width:100%;"> <!-- 显示图片 -->
        <div class="container"><br>
            <span class="style11"><strong>Digital Ludeme Project</strong></span> <!-- 标题 -->
            <p><span class="style1">The Digital Ludeme Project aims to bridge the gap between historical and computational studies of games, by applying modern AI techniques to the available historical and archaeological evidence.</span></p> <!-- 项目介绍 -->
        </div>
    </a>
</div>

&nbsp; <!-- 添加空白 -->

<!-- 第二个卡片，展示Ludii的服务 -->
<div class="card">
    <a href="services.php">
        <img src="images/ludiiSurakarta.png" alt="Avatar" style="width:100%;"> <!-- 显示图片 -->
        <div class="container"><br>
            <span class="style11"><strong>Ludii Services</strong></span> <!-- 标题 -->
            <p><span class="style1">The system will not only model and play games, but will evaluate reconstructions for quality and historical authenticity, automatically improving them where possible, and provide a number of other services.</span></p> <!-- 服务介绍 -->
        </div>
    </a>
</div>

</div> <!-- 结束行容器 -->

&nbsp; <!-- 添加空白 -->

<!-- 新的一行展示更多卡片 -->
<div class="row">

    <!-- 第一个卡片，讨论论坛 -->
    <div class="card">
        <a href="forum/">
            <img src="images/forumSnipFinal.png" alt="Avatar" style="width:100%;"> <!-- 显示图片 -->
            <div class="container"><br>
                <span class="style11"><strong>Discussion Forum</strong></span> <!-- 标题 -->
                <p><span class="style1">Chat with other members of the Ludii community, discuss the results of the latest competitions, and let us know of any games or features you would like to see added.</span></p> <!-- 论坛介绍 -->
            </div>
        </a>
    </div>

    &nbsp; <!-- 添加空白 -->

    <!-- 第二个卡片，世界地图 -->
    <div class="card">
        <a href="worldMap.php">
            <img src="images/mapSnipFinal.png" alt="Avatar" style="width:100%;"> <!-- 显示图片 -->
            <div class="container"><br>
                <span class="style11"><strong>World Map</strong></span> <!-- 标题 -->
                <p><span class="style1">Our database of games also includes a large amount of historical and cultural evidence. View all the games that we have collected so far on our World Map.</span></p> <!-- 世界地图介绍 -->
            </div>
        </a>
    </div>

    &nbsp; <!-- 添加空白 -->

    <!-- 第三个卡片，联系方式 -->
    <div class="card">
        <a href="contact.php">
            <img src="images/Maastricht_University.jpg" alt="Avatar" style="width:100%;"> <!-- 显示图片 -->
            <div class="container"><br>
                <span class="style11"><strong>Contact us</strong></span> <!-- 标题 -->
                <p><span class="style1">You can contact us directly using email, Facebook or Twitter.</span></p> <!-- 联系方式介绍 -->
            </div>
        </a>
    </div>

</div>

&nbsp; <!-- 添加空白 -->

<!-- 侧边栏展示“今日游戏” -->
<td width="12%" valign="top" bgcolor="#FFFFFF">
    <table width="100%" height="48" cellpadding="10" cellspacing="3">
        <tbody id="game_day_text">
            <tr bgcolor="#B4EBFF"> <!-- 设置背景色 -->
                <td class="roundedCornersBorder" width="98%" height="48" align="center" valign="top" style="padding-bottom:0">
                    <p><strong><span class="style2">Game of the Day</span></strong></p> <!-- 标题 -->
                    <a href=details.php?keyword=Len%20Doat> <!-- 游戏详情链接 -->
                        <img src=images/games/thumbnails/thumb-Len%20Doat-d.png alt="" width="100%" align="center" title="" /> <!-- 显示游戏缩略图 -->
                        <p><span class="style2"><strong>Len Doat</strong></span><br> <!-- 游戏名称 -->
                            <span class="style1">Southeastern Asia</span><br> <!-- 游戏来源地区 -->
                            <span class="style1">Modern</span><br> <!-- 游戏类型 -->
                            <span class="style1">Board, Race, Escape</span><br> <!-- 游戏类别 -->
                        </p>
                    </a>
                </td>
            </tr>
        </tbody>
    </table>

    <br> <!-- 添加空白 -->
</td>
<!-- Twitter 时间线嵌入部分 -->
<div style="overflow:auto; height:900px">
    <!-- 创建一个嵌入的 Twitter 时间线链接 -->
    <a class="twitter-timeline" data-theme="light" href="https://twitter.com/LudiiGames" width="300px">Tweets by LudiiGames</a>
    <!-- 异步加载 Twitter 小部件脚本 -->
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

<!-- 页脚部分 -->
<tr>
    <!-- 页脚背景色设置 -->
    <td height="77" bgcolor="#eeeeee">
        <!-- 表格用来组织页脚中的内容 -->
        <table width="100%" border="0" cellpadding="2" cellspacing="0">
            <!-- 表格主体 -->
            <tbody>
                <tr>
                    <!-- 联系方式部分 -->
                    <td width="25%" height="79" valign="middle" background="images/bg-2.jpg">
                        <!-- 联系我们标题 -->
                        <p><strong>Contact Us</strong><br>
                            <!-- 第一个邮件地址链接 -->
                            <a href="mailto:ludii.games@gmail.com">ludii.games@gmail.com</a> <br>
                            <!-- 第二个邮件地址链接 -->
                            <a href="mailto:cameron.browne@maastrichtuniversity.nl">cameron.browne@maastrichtuniversity.nl</a>
                        </p>
                    </td>

                    <!-- 大学和部门信息部分 -->
                    <td width="30%" valign="middle" background="images/bg-2.jpg">
                        <!-- 显示马斯特里赫特大学和部门链接 -->
                        Maastricht University <a href="https://www.maastrichtuniversity.nl/research/department-advanced-computing-sciences">Department of Advanced Computing Sciences</a>, 
                        <!-- 提供地址并链接到 Google Maps -->
                        <a href="https://www.google.com/maps/place/Paul-Henri+Spaaklaan+1">Paul-Henri Spaaklaan 1, 6229 EN Maastricht, Netherlands</a>
                    </td>

                    <!-- 资助信息部分 -->
                    <td width="20%" valign="middle" background="images/bg-2.jpg">
                        <!-- 提供资助信息，并链接到 ERC 网站 -->
                        Funded by a €2m <a href="https://erc.europa.eu/news/erc-2017-consolidator-grants-results">ERC Consolidator Grant (#771292)</a> from the <a href="https://erc.europa.eu/">European Research Council</a>
                    </td>

                    <!-- 社交媒体图标部分 -->
                    <td width="25%" align="center" background="images/bg-2.jpg">
                        <!-- 邮件图标 -->
                        <a href="mailto:ludii.games@gmail.com" class="fa fa-envelope"></a>
                        <!-- Twitter 图标 -->
                        <a href="https://twitter.com/LudiiGames" class="fa fa-twitter"></a>
                        <!-- Facebook 图标 -->
                        <a href="https://www.facebook.com/Digital-Ludeme-Project-106546844032240/" class="fa fa-facebook"></a>
                    </td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>

<!-- Cookie Consent 脚本 -->
<!-- 引入 cookie consent 的脚本，用于显示 cookie 使用的提示 -->
<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>
<!-- 引入 cookieFooter.js 脚本 -->
<script type="text/javascript" src="javascripts/cookieFooter.js"></script>
</tbody>  
</table>
</div>
</body>
</html>